<template>
    <div class="content">
        <TableLayout form-title="查询条件">
            <el-form :model="form" class="formInline" label-width="100px" slot="form" v-collapse="true" label-position="right">
                <el-row :gutter="41">
                    <el-col :span="8">
                        <el-form-item label="省份">
                          <province v-model="form.provinceId"></province>
                        </el-form-item>
                    </el-col>
                    <el-col :span="8">
                        <el-form-item label="市区">
                          <city v-model="form.cityId" :province="form.provinceId" ></city>
                        </el-form-item>
                    </el-col>
                    <el-col :span="8">
                        <el-form-item label="区县">
                            <region v-model="form.areaId" :city="form.cityId" ></region>
                        </el-form-item>
                    </el-col>
                </el-row>
                <el-row :gutter="41">
                    <el-col :span="8">
                        <el-form-item label="广告类型">
                            <el-select v-model="form.advertType" placeholder="请选择" style="width:100%">
                                <el-option v-for="item in form.advList" :key="item.value" :label="item.label" :value="item.value"></el-option>
                            </el-select>
                        </el-form-item>
                    </el-col>
                    <el-col :span="8">
                        <el-form-item label="广告名称">
                            <el-input v-model="form.advertName" placeholder="请输入内容"></el-input>
                        </el-form-item>
                    </el-col>
                    <el-col :span="8">
                        <el-form-item label="状态">
                            <el-select v-model="form.advertStatus" placeholder="请选择" style="width:100%">
                                <el-option v-for="item in form.stateList" :key="item.value" :label="item.label" :value="item.value"></el-option>
                            </el-select>
                        </el-form-item>
                    </el-col>
                </el-row>
                <el-row :gutter="41">
                    <el-col :span="8">
                        <el-form-item label="发布人">
                            <el-input v-model="form.issue" placeholder="请输入内容"></el-input>
                        </el-form-item>
                    </el-col>
                </el-row>
                <!-- <div class="formBtn">
                    <div class="btnPosition"> 
                        <el-button type="primary" @click="onSubmit">查询</el-button>
                    </div>
                </div> -->

                <div class="top-line">
                    <el-button type="primary" @click="onSubmit">查询</el-button>
                </div>

            </el-form>
            <div class="table-title" slot="table-title">               
                <div class="btnPosition">
                    <el-button @click="batchDel">批量删除</el-button>
                    <el-button @click="batchadd">添加</el-button>
                </div>
            </div>
            <el-table ref="multipleTable" border :data="form.tableData" tooltip-effect="dark" style="width: 100%" @selection-change="handleSelectionChange" v-loading="loading">
                <el-table-column type="selection" width="55" :selectable="fn" align="center"></el-table-column>
                <el-table-column prop="advertName" label="广告名称"  width="165px" align="center">
                    <template scope="scope">
                      <span class="link-src btn" @click="btnView(scope.row.advertId)">{{scope.row.advertName}}</span>
                    </template>
                </el-table-column>
                <el-table-column label="广告类型" align="center">
                    <!-- 4 课程学习 3 周边教育 -->
                    <template scope="scope">
                        {{scope.row.typeName == '4' ? '课程学习' : scope.row.typeName == '3' ? '周边教育' : ''}}
                    </template>
                </el-table-column>
                <el-table-column prop="issue" label="发布人"  width="145px" align="center">
                    <template scope="scope">
                        {{scope.row.issue == null ? '--' : scope.row.issue}}
                    </template>
                </el-table-column>
                <el-table-column prop="createTime" label="创建时间" width="180px" align="center">
                    <template scope="scope">
                        {{scope.row.createTime == null ? '--' : scope.row.createTime}}
                    </template>
                </el-table-column>
                <el-table-column prop="auditor" label="审核人" align="center">
                    <template scope="scope">
                        {{scope.row.auditor == null ? '--' : scope.row.auditor}}
                    </template>
                </el-table-column>
                <el-table-column prop="advertStatus" label="状态" width="120px" align="center">
                    <template scope="scope">
                        {{scope.row.advertStatus == '0' ? '待审核' : scope.row.advertStatus == '1' ? '驳回' : scope.row.advertStatus == '2' ? '上线' : scope.row.advertStatus == '3' ? '下线' : ''}}
                    </template>
                </el-table-column>
                <el-table-column prop="orgName" label="提交机构" align="center">
                    <template scope="scope">
                        {{scope.row.orgName == null ? '--' : scope.row.orgName}}
                    </template>
                </el-table-column>
                <el-table-column prop="clickNum" label="点击次数" align="center">
                    <template scope="scope">
                        {{scope.row.clickNum == null ? '0' : scope.row.clickNum}}
                    </template>
                </el-table-column>
                <el-table-column prop="level" label="可见级别" align="center">
                    <template scope="scope">
                        {{scope.row.level == null ? '--' : scope.row.level}}
                    </template>
                </el-table-column>
                <el-table-column prop="weight" label="权重" width="80px" align="center">
                    <template scope="scope">
                        {{scope.row.weight == null ? '--' : scope.row.weight}}
                    </template>
                </el-table-column>
                <el-table-column label="操作" width="190">
                    <template scope="scope">
                        <!-- 1 经销商  0 总部  companyStatus-->
                        <!-- 状态 0 审核中 1 驳回 2 上线 3 下线 advertStatus -->
                        <!--<el-button @click="btnView(scope.row.advertId)" type="text" class="btn">查看</el-button>-->
                        <el-button @click="downline(scope.row.advertId)" v-if="scope.row.advertStatus === '2'" type="text" class="btn">下线</el-button>
                        <el-button @click="online(scope.row.advertId)" v-if="scope.row.companyStatus ==='0' && scope.row.advertStatus === '3'" type="text" class="btn">上线</el-button>
                        <el-button @click="btnEdit(scope.row)" v-if="scope.row.companyStatus ==='0' && scope.row.advertStatus === '3'" type="text" class="btn">编辑</el-button>
                        <el-button @click="del(scope.row.advertId)" v-if="scope.row.advertStatus ==='1' || scope.row.advertStatus === '3'" type="text" class="btn">删除</el-button>
                        <el-button @click="getState(scope.row.advertId)" v-if="scope.row.companyStatus ==='1' && scope.row.advertStatus === '0'" type="text" class="btn">审核</el-button>

                        <!--<el-button v-if="scope.row.advertStatus === '2'" v-clipboard="scope.row.link" @click="clipboardSuccessHandler" type="text" class="btn">复制链接</el-button> -->
                    </template>
                </el-table-column>
            </el-table>
            <div class="pagination-container" style="text-align:right">
                <el-pagination
                    layout="total, sizes, prev, pager, next, jumper"
                    :total="listQuery.total"
                    :current-page.sync="listQuery.page"
                    :page-sizes="config.pageSizes"
                    :page-size="config.pageSize"
                    @size-change="handleSizeChange"
                    @current-change="handleCurrentChange">
                </el-pagination>
            </div>
        </TableLayout>
    </div>
</template>

<script>
import TableLayout from 'components/TableLayout';
import province from 'components/CascadeRegion/province';
import city from 'components/CascadeRegion/city';
import region from 'components/CascadeRegion/region';
import { listAdvertByCondition, uplodAdvert, updateAdvertStatus, batchDeleteAdvert} from 'api/advApi';
import { mapState, mapActions } from 'vuex';
import Clipboard from 'v-clipboard';
export default {
    name: 'mainList',
    components: {
        TableLayout,
        province,
        city,
        region,
        Clipboard
    },
    data() {
        return {
            listQuery: {
        // 分页
                page: 1,
                total: 0
            },
            loading: false,
            adding: false,
            form: {
                provinceId: '',
                cityId: '',
                areaId: '',
                advertType: '',
                advertName: '',
                advertStatus: '',
                issue: '',
                carousel: '1',
                advList: [
                    {
                        label: '请选择',
                        value: ''
                    },
                    {
                        label: '课程学习',
                        value: '4'
                    },
                    {
                        label: '周边教育',
                        value: '3'
                    }
                ],
                stateList: [
                    {
                        label: '请选择',
                        value: ''
                    },
                    {
                        label: '待审核',
                        value: '0'
                    },
                    {
                        label: '驳回',
                        value: '1'
                    },
                    {
                        label: '上线',
                        value: '2'
                    },
                    {
                        label: '下线',
                        value: '3'
                    }
                ],
                tableData: []
            },
            // 批量删除字符集合
            delAll: ''
        };
    },
    computed: {
        ...mapState({
            config: state => state.config.table,
            cacheUpdated: state => state.app.cacheUpdated// 局部刷新列表
        })
    },
    created() {
        this.searchAll();
    },
    methods: {
        ...mapActions(['ChangePageSize']),
        handleSizeChange(val) {
            
            this.listQuery.page = 1;
            console.log('this.listQuery.page', this.listQuery.page);
            this.ChangePageSize(val);
            this.searchAll();
        },
        handleCurrentChange(val) {
            this.listQuery.page = val;
            this.searchAll();
        },
        clipboardSuccessHandler() {
            if (this.$clipboard()) {
                this.$message({
                    message: '复制成功！',
                    type: 'success'
                });
            }
        },
        clipboardErrorHandler() {
            this.$message.error('复制失败，请手动尝试复制！');
        },
        searchAll() {
            this.loading = true;
            // this.listQuery.page = 1;
            listAdvertByCondition(
                this.form.advertName,
                this.form.advertType,
                this.form.advertStatus,
                this.form.issue,
                this.form.provinceId,
                this.form.cityId,
                this.form.areaId,
                this.listQuery.page,
                this.config.pageSize,
                this.form.carousel
            ).then(data => {
                this.loading = false;
                this.form.tableData = data.data.content.list;
                this.listQuery.total = data.data.content.pagination.total;
            }).catch(Error => {
                this.loading = false;
            })
        },
        onSubmit() {
            this.listQuery.page = 1;
            this.searchAll();
        },
        // 上线
        // online(val) {
        //     this.loading = true;
        //     uplodAdvert(val).then(data => {
        //         this.searchAll();
        //         this.$message({
        //             message: '上线成功！',
        //             type: 'success'
        //         });
        //     }).catch(Error => {
        //         this.loading = true;
        //     })
        // },
        // 下线
        // downline(val) {
        //     this.loading = true;
        //     updateAdvertStatus(val).then(data => {
        //         this.searchAll();
        //         this.$message({
        //             message: '下线成功！',
        //             type: 'success'
        //         });
        //     }).catch(Error => {
        //         this.loading = true;
        //     })
        // },
        // 上线
        online(val) {
            this.$confirm('是否上线?', ' ', {
                confirmButtonText: '确定',
                cancelButtonText: '取消',
                type: ' '
            }).then(() => {
                this.loading = true;
                uplodAdvert(val).then(data => {
                    // this.form.advertName = '';
                    // this.form.advertType = '';
                    // this.form.advertStatus = '';
                    // this.form.issue = '';
                    // this.form.provinceId = '';
                    // this.form.cityId = '';
                    // this.form.areaId = '';
                    // this.form.carousel = '';
                    this.searchAll();
                    this.$message({
                        type: 'success',
                        message: '上线成功!'
                    });
                }).catch(Error => {
                    this.loading = true;
                    this.$message.error(Error);
                })
            }).catch(() => {
                this.$message({
                    type: 'info',
                    message: '已取消上线'
                });          
            });
        },
        // 下线
        downline(val) {
            this.$confirm('是否下线?', ' ', {
                confirmButtonText: '确定',
                cancelButtonText: '取消',
                type: ' '
            }).then(() => {
                this.loading = true;
                updateAdvertStatus(val).then(data => {
                    // this.form.advertName = '';
                    // this.form.advertType = '';
                    // this.form.advertStatus = '';
                    // this.form.issue = '';
                    // this.form.provinceId = '';
                    // this.form.cityId = '';
                    // this.form.areaId = '';
                    // this.form.carousel = '';
                    this.searchAll();
                    this.$message({
                        type: 'success',
                        message: '下线成功!'
                    });
                }).catch(Error => {
                    this.loading = true;
                    this.$message.error(Error);
                })
            }).catch(() => {
                this.$message({
                    type: 'info',
                    message: '已取消下线'
                });          
            });
        },
        // 批量删除
        batchDel() {
            if (this.delAll) {
                this.$confirm('此操作将永久删除, 是否继续?', ' ', {
                    confirmButtonText: '确定',
                    cancelButtonText: '取消',
                    type: ''
                }).then(() => {
                    this.loading = true;
                    batchDeleteAdvert(this.delAll).then(data => {
                        this.loading = false;
                        this.$message({
                            type: 'success',
                            message: '删除成功!'
                        });
                        this.searchAll();
                    }).catch(Error => {
                        this.loading = false;
                        this.$message.error(Error);
                    })
                }).catch(() => {
                    this.$message({
                        type: 'info',
                        message: '已取消删除'
                    });          
                });
            } else {
                this.$message('请选择删除项');
            }
        },
        // 单个删除
        del(val) {
            this.$confirm('此操作将永久删除, 是否继续?', ' ', {
                confirmButtonText: '确定',
                cancelButtonText: '取消',
                type: ''
            }).then(() => {
                this.$message({
                    type: 'success',
                    message: '删除成功!'
                });
                this.loading = true;
                batchDeleteAdvert(val).then(data => {
                    this.searchAll();
                }).catch(Error => {
                    this.loading = true;
                })
            }).catch(() => {
                this.$message({
                    type: 'info',
                    message: '已取消删除'
                });          
            });
        },
        // 获取批量删除的数组
        handleSelectionChange(val) {
            let newArr =[];
            val.forEach(item => {
                newArr.push(item.advertId)
            })
            this.delAll = newArr.join(',')
        },
        // 判断是否可以选择

        fn(row) {
            // 2上线 3下线
            return (row.advertStatus === '3'||row.advertStatus === '1');
        },
        // 审核

        getState(val) {
            this.$router.push({ name: '审核', params: { id: val } });
        },
        // 添加

        batchadd() {
            // this.$router.push({ name: '添加广告' });
            this.$router.push({ path: 'AdvparcelMange', query: {} });
        },
        // 查看

        btnView(val) {
            this.$router.push({ path: `getAdvDetail/${val}`});
        },
        // 编辑

        btnEdit(val) {
            // advertId id
            // typeName 类型
            // 3：周边教育广告 4：课程学习广告
            let typeName = val.typeName;
            console.log('typeName', typeName);
            switch (typeName) {
                case '4':
                    // 4 课程学习广告
                    this.$router.push({ path: `AdvparcelMange/4/${val.advertId}`});
                    // this.$router.push({ name: '添加广告', params: {state: '4', id: val.advertId} });
                    break;
                case '3':
                    // 3 周边教育广告
                    this.$router.push({ path: `AdvparcelMange/3/${val.advertId}`});
                    // this.$router.push({ name: '添加广告', params: {state: '3', id: val.advertId} });
                    break;
                default:
                    this.$message('目前没有该类型');
                    break;
            }
        }
    },
    watch: {// 局部刷新列表
        cacheUpdated(val) {
            val && this.searchAll();
        }
    }

};
</script>

<style lang="scss" scoped>
.content {
  position: relative;
  padding: 0px;
  $bgcolor: #fff;
  .formInline {
    .formBtn {
      width: 100%;
      height: 70px;
    //   border-top: 1px solid #dddddd;
      position: relative;
      .btnPosition {
        position: absolute;
        right: 0px;
        top: 18px;
      }
    }
  }
  .btn{
     color: #37a1fb;
  }
}
</style>

